<script setup lang="ts">
import { useWebxSearch, useWebxTable } from "@webxue/vue3-antdv-ui";
import { computed } from "vue";
import { PlusOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();
// 查询表单
const searchData = useWebxSearch({
  formState: {},
  onSubmit() {},
  onReset() {}
});
// 表格数据
const tableData = useWebxTable({
  searchForm:{
    page: [1,1],
    pageSize: [10,10],
  },
  total: 0,
  dataSource: [
    { key: "1", name: "胡彦斌", age: 32, address: "西湖区湖底公园1号" },
    { key: "2", name: "胡彦祖", age: 42, address: "西湖区湖底公园1号" }
  ],
  onGetTableList() {}
});
// 表格列
const tableColumns = computed(() => {
  const columns = [];
  columns.push({ title: "姓名", dataIndex: "name", key: "name" });
  columns.push({ title: "年龄", dataIndex: "age", key: "age" });
  columns.push({ title: "住址", dataIndex: "address", key: "address" });
  columns.push({ title: "操作", dataIndex: "operate", key: "operate", width: 240 });
  return columns;
});
// 文章编辑
const onCreate = () => {
  router.push("/article/form");
};
</script>

<template>
  <div class="article-index flex flex-col gap-2">
    <!-- 查询条件 -->
    <WebxSearch
      :model="searchData.formState"
      @submit="searchData.onSubmit"
      @reset="searchData.onReset"
    >
      <AFormItem label="关键词">
        <AInput v-model:value="searchData.formState.name" placeholder="请输入关键词" />
      </AFormItem>
    </WebxSearch>
    <!-- 表格 -->
    <WebxTable
      :dataSource="tableData.dataSource"
      :columns="tableColumns"
      @refresh="tableData.onRefresh"
    >
      <template #headRight>
        <div class="mr-2">
          <AButton type="primary" @click="onCreate">
            <PlusOutlined />
            发布文章
          </AButton>
        </div>
      </template>
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.dataIndex === 'operate'">
          <div class="flex gap-2 items-center">
            <WebxBtn operate="on" />
            <WebxBtn operate="off" />
            <WebxBtn operate="edit" />
            <WebxBtn operate="del" />
          </div>
        </template>
      </template>
    </WebxTable>
  </div>
</template>

<style scoped lang="less"></style>
